<template>

  <!-- <v-card  class="mx-auto"> -->
 <v-navigation-drawer app clipped> 
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="text-h6"> 测试平台 </v-list-item-title>
          
          <v-list-item-subtitle> 霍格沃兹 </v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
      <v-divider></v-divider>
      <v-list dense nav> 
        <v-list-item v-for="item in items" :key="item.title" link @click="gotoPage(item.path)">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
        </v-navigation-drawer> 
  <!-- </v-card> -->
 
</template>
<script>
export default {
  name: "NavigationCompontent",
  data() {
    return {
      items: [
        { title: "Dashboard", icon: "mdi-view-dashboard", path: "data" },
        { title: "Photos", icon: "mdi-image", path: "photo" },
        { title: "About", icon: "mdi-help-box", path: "about" },
      ],
      right: null,
    };
  },
  methods: {
    gotoPage(path) {
      this.$router.push(path);
    },
  },
};
</script>